<template>
  <div class="equip-out-frame">
    <Card class="equip-card">
      <template slot="title">
        <p> {{ !isEdit ? '新增设备台账' : '编辑设备台账'}}</p>
      </template>
      <template slot="extra">
        <Button type="primary" @click="exitBtn" icon="md-exit">
          退出
        </Button>
      </template>
      <div>
        <Form :model="formItem" :label-width="100" label-position="right" :rules="ruleValidate">
          <Row :gutter="10">
            <i-col span="8">
              <FormItem label="设备名称">
                <Input v-model="formItem.equipName" placeholder="请输入"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="设备编号">
                <Input v-model="formItem.equipCode" placeholder="请输入"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="型号规格">
                <Select v-model="formItem.equipModel">
                  <Option value="大型">大型</Option>
                  <Option value="中型">中型</Option>
                  <Option value="小型">小型</Option>
                </Select>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="10">
            <i-col span="8">
              <FormItem label="增加方式">
                <Select v-model="formItem.addType">
                  <Option value="上级调拨">上级调拨</Option>
                  <Option value="本级自筹">本级自筹</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="制造工厂">
                <Input v-model="formItem.factory" placeholder="请输入"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="国标编码">
                <Input v-model="formItem.nationalCode" placeholder="请输入"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="10">
            <i-col span="8">
              <FormItem label="制造日期">
                <DatePicker placeholder="请选择" v-model="formItem.makeDate" style="width: 100%;" class="width-num"></DatePicker>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="使用部门">
                <Select v-model="formItem.adept">
                  <Option value="工程部">工程部</Option>
                  <Option value="商务部">商务部</Option>
                  <Option value="销售部">商务部</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="使用状态">
                <Select v-model="formItem.state">
                  <Option value="正常">正常</Option>
                  <Option value="待验收">待验收</Option>
                  <Option value="采购中">采购中</Option>
                  <Option value="完好">完好</Option>
                  <Option value="正在维修或检验">正在维修或检验</Option>
                  <Option value="借出">借出</Option>
                  <Option value="待报废">待报废</Option>
                  <Option value="已报废">已报废</Option>
                </Select>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="10">
            <i-col span="8">
              <FormItem label="设备类型">
                <Select v-model="formItem.equipType">
                  <Option value="所有类型">所有类型</Option>
                  <Option value="电子设备">电子设备</Option>
                  <Option value="电脑类">电脑类</Option>
                  <Option value="房产类">房产类</Option>
                  <Option value="打印机类">打印机类</Option>
                  <Option value="不动产类">不动产类</Option>
                  <Option value="土地类">土地类</Option>
                  <Option value="小型设备">小型设备</Option>
                  <Option value="其他分组">其他分组</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="存放地点">
                <Select v-model="formItem.address">
                  <Option value="一号仓库">一号仓库</Option>
                  <Option value="财务科">财务科</Option>
                  <Option value="装备楼">装备楼</Option>
                  <Option value="教员办1">教员办1</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="保管人员">
                <Select v-model="formItem.personLiable">
                  <Option value="刘烨">刘烨</Option>
                  <Option value="霍勇">霍勇</Option>
                  <Option value="王翔">王翔</Option>
                  <Option value="侯亮平">侯亮平</Option>
                  <Option value="李月斌">李月斌</Option>
                </Select>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="10">
            <i-col span="8">
              <FormItem label="数量">
                <Input v-model="formItem.num" placeholder="请输入"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="单位">
                <Select v-model="formItem.unit">
                  <Option value="支">支</Option>
                  <Option value="m">m</Option>
                  <Option value="km">km</Option>
                  <Option value="cm">cm</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="单价">
                <Input v-model="formItem.price" placeholder="请输入"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="10">
            <i-col span="8">
              <FormItem label="启用时间">
                <DatePicker placeholder="请选择" v-model="formItem.date"  style="width: 100%;" class="width-num"></DatePicker>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="使用年限">
                <Input v-model="formItem.yearNum" placeholder="请输入"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="预估报废时间">
                <DatePicker placeholder="请选择" v-model="formItem.endDate"  style="width: 100%;" class="width-num"></DatePicker>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="10">
            <i-col span="8">
              <FormItem label="原值">
                <Input v-model="formItem.originValue" placeholder="请输入"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="残值率(%)">
                <Input v-model="formItem.residualRate" placeholder="请输入"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="残值">
                <Input v-model="formItem.residualNum" placeholder="请输入"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row :gutter="10">
            <i-col span="8">
              <FormItem label="保养间隔月">
                <Input v-model="formItem.month" placeholder="请输入"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="折旧方法">
                <Input v-model="formItem.methods" placeholder="请输入"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="登记日期">
                <DatePicker placeholder="请选择" v-model="formItem.registrationDate"  style="width: 100%;" class="width-num"></DatePicker>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="12">
              <FormItem label="备注">
                <Input type="textarea" :rows="3" v-model="formItem.remark"></Input>
              </FormItem>
            </i-col>
          </Row>
          <FormItem>
            <Button type="primary" style="width: 285px;" @click="addItem" :disabled="isEdit">确认</Button>
          </FormItem>
        </Form>
      </div>
    </Card>
  </div>
</template>

<script>
  export default {
    name: "OperateEquipData",
    data() {
      return {
        formItem: {},
        ruleValidate: {},
        isEdit: false,
      }
    },
    methods: {
      exitBtn() {
        this.$router.push({
          path: '/maintenan-info'
        })
      },
      addItem() {
        this.$Modal.confirm({
          title: '提示',
          content: '是否保存当前数据？',
          onOk: () => {
            this.formItem.id = this.$dataInfo.equipTableList.length;
            this.$dataInfo.insertEquipList(this.formItem);
            this.$success('操作成功');
            this.$router.push({
              path: '/maintenan-info'
            })
          },
          onCancel: () => {
            return;
          }
        })
      }
    },
    mounted() {
      if (this.$route.query && this.$route.query.id) {
        this.isEdit = true;
        let data = this.$dataInfo.getEquipById(this.$route.query.id);
        if (data.returnCode === 200) {
          this.formItem = data.returnData;
        } else {
          this.$warn('未查询到数据', 3);
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../styles/common";

  /deep/ .equip-card .ivu-card-head p {
    font-size: 18px;
  }

  .equip-out-frame {
    margin-top: 100px;
    margin-bottom: 30px;
    width: 100%;
    .equip-card {
      width: 1200px;
      margin: 0 auto;
    }
  }
</style>
